<template>
  <div>
    <div class="app-page">
      <table-search
        :search-form="queryFormItem"
        :on-submit="handleQuery"
        :on-reset="handleQuery"
      />
    </div>
    <el-card class="table">
      <!-- :table-buttons="deviceTableButtons" -->
      <TablePaging
        :table-list="deviceList"
        border
        :table-column="deviceTableColumn"
        :table-btn-width="180"
        :table-paging="deviceTablePaging"
        :table-total="deviceTableTotal"
        @pagingChange="handlePaginChange"
      />
    </el-card>
    <!-- 接收人弹窗 -->
    <receiver
      title="接收人明细"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="
        () => {
          dialogVisible = false
        }
      "
      :receive-key-id="receiveKeyId"
      :receive-type="receiveType"
    />
    <!-- 销项任务详情弹窗 -->
    <template v-if="detailVisible">
      <el-dialog
        append-to-body
        title="销项任务详情"
        :visible="detailVisible"
        :before-close="() => (detailVisible = false)"
      >
        <sales-task-detail :detail-info="detailInfo" :task-info="taskInfo" :task-table-paging="taskTablePaging" />
      </el-dialog>
    </template>
  </div>
</template>

<script>
import {
  fetchDeviceAdd,
  fetchDeviceGet,
  fetchDeviceUpdate,
  fetchDeviceDelete
} from '@/api/basicinfo/device'
import { fetchTaskGet } from '@/api/homeDialog'
import { taskFindPage, getAccountList } from '@/api/basiness'
import { TableSearch, TablePaging } from '@/components'
import receiver from './receiver'
import { SalesTaskDetail } from '@/components'
import { queryFormItem, tableColumn } from './config'
import { parseTime } from '@/utils/index'
import { Row } from 'element-ui'

export default {
  name: 'Device',
  components: { TableSearch, TablePaging, receiver, SalesTaskDetail },
  props: {
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      deviceList: [],
      detailInfo: {},
      detailVisible: false, // 销项任务详情弹窗
      queryFormData: {},
      queryFormItem,
      deviceTableColumn: tableColumn(
        1,
        10,
        this.handleReceiver,
        this.handleSeeDetails
      ),
      taskInfo: [],
      deviceTableButtons: [
        // 设备表操作按钮
        {
          name: '浏览',
          click: ''
        },
        {
          name: '修改',
          click: this.handleEdit
        },
        {
          name: '删除',
          click: this.handleDelete
        }
      ],
      taskTablePaging: {
        page: 1,
        pagesize: 5
      },
      deviceTableTotal: 0,
      deviceTablePaging: {
        page: 1,
        pagesize: 5
      },
      dialogTitle: '添加', // 弹窗标题
      dialogVisible: false, // 弹窗显示隐藏
      modalFormData: {}, // 弹窗表单数据
      deviceCodeDisabled: false, // 设备号是否禁止修改
      receiveKeyId: 0,
      receiveType: 4 // 1=短信，2=数据报告，3=整改建议，4=销项
    }
  },
  created() {
    this.postFindPage()
    this.postReceiver()
  },
  methods: {
    handleQuery(values) {
      // 查询点击
      this.queryFormData = values
      this.deviceTablePaging = {
        page: 1,
        pagesize: 5
      }
      this.postFindPage()
    },
    handleReceiver(row) {
      // 点击接收人
      this.receiveKeyId = row.id
      this._setModalData('接收人明细', true, {})
    },
    handleAdd() {
      // 新增
      this._setModalData()
    },

    handleEdit(id) {
      // 修改
      fetchDeviceGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    handleDelete(id) {
      this.$confirm('是否删除此设备?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.postDeviceDelete(id)
        })
        .catch(() => {})
    },

    handleModalSubmit(values) {
      // 弹窗表单提交
      if (values.id) {
        this.postDeviceUpdate(values)
        return false
      }
      this.postDeviceAdd(values)
    },

    handlePaginChange(pageInfo) {
      // 分页改变
      this.deviceTablePaging = pageInfo
      this.postFindPage()
      const { page, pagesize } = pageInfo
      this.deviceTableColumn = tableColumn(page, pagesize)
    },

    _setModalData(title = '创建业务', visible = true, formData = {}) {
      // 设置弹窗
      this.modalFormData = formData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.deviceCodeDisabled = title !== '添加'
    },
    // 获取销项详情
    handleSeeDetails(row) {
      this.detailVisible = true
      this.postTaskDetail(row)
      this.postTaskList(row)
    },
    postTaskDetail(row) {
      fetchTaskGet({
        id: row.id
      }).then(res => {
        this.$data.detailInfo = res
      })
    },
    postTaskList(row) {
      taskFindPage({
        ...this.taskTablePaging,
        parentTaskId: row.id,
        businessId: this.id
      }).then(res => {
        const { records, current, size, total } = res
        records.forEach(obj => {
          this.$set(obj, 'createTime', parseTime(obj.createTime))
        })
        this.taskInfo = records
        this.taskTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postFindPage() {
      // 获取列表
      console.log(this.$props.id)
      taskFindPage({
        ...this.queryFormData,
        ...this.deviceTablePaging,
        parentTaskId: 0,
        businessId: this.$props.id
      }).then(res => {
        const { records, current, size, total } = res
        this.deviceList = records
        this.deviceTablePaging = {
          page: current,
          pagesize: size
        }
        this.deviceTableTotal = total
      })
    },
    postReceiver() {
      getAccountList().then(val => {
        const res = val.map(e => ({ key: e.id, value: e.name }))
        this.queryFormItem.forEach(obj => {
          for (const key in obj) {
            if (obj[key] === 'receiver') {
              this.$set(obj, 'options', res)
            }
          }
        })
      })
    },

    postDeviceAdd(values) {
      // 设备新增
      fetchDeviceAdd(values).then(res => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
        this.postFindPage()
      })
    },

    postDeviceUpdate(values) {
      // 设备更新
      fetchDeviceUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        this.postFindPage()
      })
    },

    postDeviceDelete(id) {
      // 设备删除
      fetchDeviceDelete({ id }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.postFindPage()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-page {
  min-height: 0;
}
.table {
  margin-top: 20px;
}
</style>
